import ComponentCodePreview from "@/components/app/component-code-preview"
import { generateMetadata } from "../utils/metadata"
import { ReasoningBasic } from "./reasoning-basic"
import { ReasoningMarkdown } from "./reasoning-markdown"

export const metadata = generateMetadata(
  "Reasoning",
  "A collapsible component for showing AI reasoning, explanations, or logic. You can control it manually or let it auto-close when the stream ends. Markdown is supported."
)

# Reasoning

A collapsible component for showing AI reasoning, explanations, or logic. You can control it manually or let it auto-close when the stream ends. Markdown is supported.

## Examples

### Basic Usage

The most basic implementation of the Reasoning component with auto-close functionality when streaming ends.

<ComponentCodePreview
  component={<ReasoningBasic />}
  filePath="app/docs/reasoning/reasoning-basic.tsx"
  classNameComponentContainer="p-8 justify-start items-start min-h-[300px]"
  hasReTrigger
/>

### With Markdown

Show rich formatting with markdown support for better structured reasoning content.

<ComponentCodePreview
  component={<ReasoningMarkdown />}
  filePath="app/docs/reasoning/reasoning-markdown.tsx"
  classNameComponentContainer="p-8 justify-start items-start min-h-[400px]"
  hasReTrigger
/>

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>

<TabsContent value="cli">

<CodeBlock
  code={`npx shadcn add "https://prompt-kit.com/c/reasoning.json"`}
  language="bash"
/>

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<CodeBlock filePath="components/prompt-kit/reasoning.tsx" language="tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</Tabs>

## Component API

### Reasoning

| Prop         | Type                    | Default | Description                                                 |
| :----------- | :---------------------- | :------ | :---------------------------------------------------------- |
| children     | React.ReactNode         |         | The content of the component                                |
| className    | string                  |         | Additional CSS classes                                      |
| open         | boolean                 |         | Control the open state (makes component controlled)         |
| onOpenChange | (open: boolean) => void |         | Callback when open state changes                            |
| isStreaming  | boolean                 |         | When false, automatically closes the reasoning (auto-close) |

### ReasoningTrigger

| Prop      | Type            | Default | Description                  |
| :-------- | :-------------- | :------ | :--------------------------- |
| children  | React.ReactNode |         | The content of the trigger   |
| className | string          |         | Additional CSS classes       |
| ...props  | HTMLAttributes  |         | Additional HTML button props |

### ReasoningContent

| Prop             | Type            | Default | Description                               |
| :--------------- | :-------------- | :------ | :---------------------------------------- |
| children         | React.ReactNode |         | The content to be displayed               |
| className        | string          |         | Additional CSS classes                    |
| contentClassName | string          |         | Additional CSS classes for the content    |
| markdown         | boolean         | false   | Enable markdown rendering for the content |
| ...props         | HTMLAttributes  |         | Additional HTML div props                 |
